<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/goodsinfo.css">
    <link rel="stylesheet" href="./css/font/iconfont.css">
    <style>
        nav {
            width: 100%;
            background-color: #000;
            position: relative;
        }
        
        footer {
            width: 100%;
            height: 580px;
            overflow: hidden;
        }
        
        .liuyan {
            width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <nav></nav>
    <div class="logo-nav">
        <div class="logo-nav-con">
            <div class="logo">
                <img src="images/下载.png" alt="">
            </div>
            <ul>
                <li>
                    <a href="">全部商品分类</a>
                </li>
                <li>
                    <a href="">华为专区</a>
                </li>
                <li>
                    <a href="">莫塞尔</a>
                </li>
                <li>
                    <a href="">华为智选</a>
                </li>
                <li>
                    <a href="">鸿蒙智联</a>
                </li>
                <li>
                    <a href="">HarmonyOS</a>
                </li>
            </ul>
            <div class="search-area">
                <input type="text">
                <span class="iconfont icon-41 fdj"></span>
            </div>
        </div>
    </div>

    <div class="main">
        <div class="mg">
            <div class="left">
                <div class="smallbox">
                    <div class="mask"></div>
                </div>
                <div class="list">
                    <button><</button>
                    <div class="ul">
                        <ul>
                            <!-- <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li> -->
                        </ul>
                    </div>

                    <button>></button>
                </div>

            </div>
            <div class="bigbox"></div>
        </div>
        <div class="box_details">
            <div class="box_detailsOne">

            </div>
            <div class="box_detailsTwo">
                【9.9特惠预订】：① 预订立省20元 ②下单享3期免息 ③9月9日支付尾款丨点击立即前往预订 > > >
            </div>
            <div class="box_detailsThree">
                <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <span></span></p>

                <div class="box_detailsThree_one">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</div>
                <div class="box_detailsThree_two">
                    以旧换新最高补贴500元
                </div>
                <div class="box_detailsThree_three">
                    银联、花呗、掌上生活、工行分期支付可享免息（免息活动适用于单款免息商品订单，含多款商品订单仅在免息活动一致时可享用）
                </div>
                <div class="box_detailsThree_four">
                    购买即赠商城积分，积分可抵现~
                </div>
            </div>
            <div class="box_detailsfour">
                <div class="box_detailsfourOne">

                    选择颜色
                </div>
                <div class="box_detailsfourTwo">
                    <img> 幻夜黑
                </div>
                <div class="box_detailsfourThree">
                    <img> 云母黑
                </div>
            </div>
            <div class="box_detailsfive">
                <div class="box_detailsfive_One">
                    保证服务
                </div>
                <div class="box_detailsfive_Two">
                    延长服务宝1年 ￥68
                </div>
            </div>
            <div class="box_detailsSex">
                <div class="box_detailsSex_One">
                    分期免息
                </div>
                <div class="box_detailsSex_Two">
                    花呗分期
                </div>
                <div class="box_detailsSex_Two">
                    掌上生活分期
                </div>
            </div>
            <div class="box_detailsSeven">
                <p>已选择商品</p>
                <p>云母灰</p>
            </div>
            <div class="box_detailsNight">
                <div class="box_detailsNight_One">
                    <div class="box_detailsNight_num">
                        0
                    </div>
                    <div class="box_detailsNight_algorithm">
                        <div class="box_detailsNight_plus">
                            +
                        </div>
                        <div class="box_detailsNight_reduce">
                            -
                        </div>
                    </div>

                </div>
                <div class="box_detailsNight_Two">
                    加入购物车

                </div>

                <div class="box_detailsNight_Three">
                    立即下单
                </div>
                <span class="a1" style="line-height: 43px;"></span>
            </div>
        </div>
    </div>
    <div class="liuyan"></div>
    <footer></footer>
</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/2.放大镜插件.js"></script>
<script src="js/goodsinfo.js"></script>
<script>
    $("nav").load("header.html");
    $("footer").load("footer.html");
    $(".liuyan").load("liuyan.html");
    let smallbox = document.querySelector(".smallbox");
    let mask = document.querySelector(".mask");
    let bigbox = document.querySelector(".bigbox");
    let mg = new Mg(smallbox, mask, bigbox);
    mg.eventBind();
</script>